<!-- 查询页面 -->

<template>
    <view class="pending">
          <!-- 上部内容区域：添加条件渲染和过渡动画 -->
  <transition name="collapse" mode="out-in">
      <view v-show="!isCollapsed" class="content-area">
            <Dataselect v-model:startDate="startDate" v-model:endDate="endDate"></Dataselect>

            <sanheyicopy titleMinwidth="80px" v-model:input1="materialCode" title1="物料查询"  :isShowbutton1="true" :is-showcheckbox2="false">
            </sanheyicopy>

            <sanheyicopy titleMinwidth="80px" v-model:input1="opener" title1="开单人" :isShowbutton1="true" :is-showcheckbox2="false">

            </sanheyicopy>

            <view>
                累计数：0
            </view>
        </view>
 </transition>
        <!-- 底部隐藏和查询按钮 -->
        <view class="bottom">
            <view class="bottom-box1">

                <button  class="bottom-button" :loading="false" open-type="" hover-class="button-hover" @click="toggleCollapse">
                    {{ toggleButtonText1 }}
                </button>
            </view>
            <view class="bottom-box2">
                <button   class="bottom-button":loading="false" open-type="" hover-class="button-hover" @click="">
                    查询
                </button>
            </view>

        </view>
    </view>

</template>

<script lang="ts" setup>
// 这里可以添加待处理的逻辑
import { ref ,computed} from 'vue'
//引入日期选择器
import Dataselect from '@/components/Dataselect/Dataselect.vue'
import sanheyicopy from '@/components/sanheyi copy.vue'


const props = defineProps({
  //开始时间
  startDate:{
    type:String,
    default:''
  },
  //结束时间
  endDate:{
    type:String,
    default:''

  },
  //物料查询
  materialCode:{
    type:String,
    default:''
  },
  //开单人
  opener:{
    type:String,
    default:''
  }
})


//开始时间
const startDate = ref(props.startDate)
//结束时间
const endDate = ref(props.endDate)
//物料查询
const materialCode = ref(props.materialCode)
//开单人
const opener = ref(props.opener)

// 添加新的响应式变量用于控制折叠状态
const isCollapsed = ref(false);
// 计算属性：根据折叠状态动态切换按钮文本
const toggleButtonText1 = computed(() => isCollapsed.value ? '显示' : '隐藏');
// 添加切换折叠状态的函数
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 添加查询按钮的处理函数
const handleQuery = () => {
  // 这里添加查询逻辑
  console.log('执行查询操作');
};

</script>

<style scoped>
.pending {
    width: 96%;
    background-color: #ececec;
    border: 1px solid #ccc;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  position: relative;  /* # 相对定位，作为子元素绝对定位的参考 */
  overflow: hidden;   /* # 溢出隐藏，确保折叠时内容不会显示 */
  transition: all 0.3s ease; /* # 添加过渡效果使整体变化更平滑 */
}

.bottom {
    margin-top: 5px;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
     /* 原样式 */
  position: relative;  /* # 相对定位，确保按钮始终可见 */
  z-index: 10;        /* # 提高层级，确保按钮始终在内容上方 */
}
.bottom-box1{
    width: 100%;
     display: flex;  /* 添加flex布局 */
    justify-content: flex-end;  /* 子元素靠右对齐 */
}
.bottom-box2{
   width: 100%;
    display: flex;  /* 添加flex布局 */
    justify-content: flex-start;  /* 子元素靠左对齐 */
}
.bottom-button{
    height: 30px;
    width: 80px;
    border-radius: 30px;
    line-height: 30px;
    background-color: rgb(76, 150, 241);
}

/* 修改内容区域样式 */
.content-area {
  transition: all 0.3s ease;  /* # 添加过渡效果 */
  will-change: transform, height, opacity; /* # 优化动画性能 */
}

/* 修改过渡动画样式实现折叠效果 */
.collapse-enter-active,
.collapse-leave-active {
  transition: transform 0.1s ease, height 0.1s ease, opacity 0.1s ease;
}

/* 进入动画的起始状态 */
.collapse-enter-from {
  transform: translateY(100%);  /* # 从下方进入 */
  height: 0;                   /* # 高度为0 */
  opacity: 0;                  /* # 完全透明 */
}

/* 离开动画的结束状态 */
.collapse-leave-to {
  transform: translateY(-50%); /* # 向上移动50% */
  height: 0;                   /* # 高度变为0 */
  opacity: 0;                  /* # 完全透明 */
}
</style>